

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
*{margin:0;padding:0}
#calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
#calendar h4{ text-align:center; margin-bottom:10px}
#calendar .a1{ position:absolute;top:20px;left:20px;}
#calendar .a2{ position:absolute;top:20px;right:20px;}
#calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
#calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
#calendar .dateList{ overflow:hidden; clear:both}
#calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
#calendar .dateList .ccc{ color:#ccc;}
#calendar .dateList .red{ background:#F90; color:#fff;}
#calendar .dateList .sun{ color:#f00;}
</style>
</head>

<body>
<div id="calendar">
	<h4 id="title"></h4>
	<a href="javascript:;" class="a1" id="prev">上月</a>
	<a href="javascript:;" class="a2" id="next">下月</a>
    <ul class="week">
    	<li>日</li>
    	<li>一</li>
    	<li>二</li>
    	<li>三</li>
    	<li>四</li>
    	<li>五</li>
    	<li>六</li>
    </ul>
    <ul class="dateList" id="dateList"></ul>
</div>	
<script>
  var dateList = document.getElementById('dateList')
  var title = document.getElementById('title')

  var date = new Date()
  title.innerHTML = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
  // 获取今天是几号
  var today = date.getDate()

  // 获取这个月的一号是星期几
  // 先把日期拨到1号
  date.setDate(1)
  // 获取1号是星期几
  var week = date.getDay()

  // 获取当前月总共有多少天
  // 把日期拨到下个月的0号，也就是这个月的最后一天
  // date.getMonth() + 1 先获取这个月再+1就是下月了
  date.setMonth(date.getMonth() + 1, 0)
  // 从date里面获取号数，也就是这个月的总天数
  var allDay = date.getDate()

  // 因为1号是从星期三开始，所以先来3个空的li
  var str = ''
  for (var i = 0; i < week; i++) {
    str += '<li></li>'
  }
  // 接下来就可以从1号开始拼接li
  for (var i = 1; i <= allDay; i++) {
    if (i < today) {
      // 今天以前有ccc置灰
      str += '<li class="ccc">' + i + '</li>'
    } else if (i === today) {
      // 当天有样式
      str += '<li class="red">' + i + '</li>'
    } else if ((week + i) % 7 === 0 || (week + i) % 7 === 1) {
      // 空的li数量加上号数总和来对7求余，这样每个月都是一样的
      // 周末
      str += '<li class="sun">' + i + '</li>'
    } else {
      str += '<li>' + i + '</li>'
    }
  }
  // 把拼接好的str放进ul里
  dateList.innerHTML = str

  // 5 12 19 26  % 7 === 5
  // 4 11 18 25  % 7 === 4

  // 8  15 22 29 % 7 === 1  
  // 7  14  21 28 & 7 === 0
</script>
</body>
</html>
